{% extends '_base_create_update.html' %}

{% block top_css %}
    {{ super() }}

    <!--Treeview-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='plugins/bootstrap-treeview/css/bootstrap-treeview.min.css') }}">
    <!--bees-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bees.css') }}">

{% endblock %}


<!-- Content head -->
{% block head_title %}
    作业中心
{% endblock %}

{% block head_nav %}
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-home"></i></a></li>
        <li><a href="#">实时任务</a></li>
        <li class="active">动态分组</li>
    </ol>
{% endblock %}

<!-- Content body -->
{% block body_title %}
    新增动态分组
{% endblock %}

{% block body_form %}
    <form name="groupForm" action="" class="form-horizontal">
        <div class="panel-body">
            <p class="bord-btm pad-ver text-main text-bold">基本信息</p>

            <div class="row">
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger">* </span>组名称</label>
                            <div class="col-lg-8">
                                <input type="text" class="form-control" name="name" value="{{ name }}" placeholder="请输入组名称" data-rule="组名称: required;" autocomplete="off">
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger">* </span>组主机</label>
                            <div class="col-lg-8">
                                <select name="asset_ids" class="form-control select2" data-rule="组主机: required;">
                                </select>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger">* </span>组变量</label>
                            <div class="col-lg-8 kwargs">
                                {% for item in vars %}
                                    <div class="row item">
                                        <div class="col-lg-5">
                                            <input name="key" type="text" value="{{ item[0] }}" class="form-control" placeholder="键" autocomplete="off">
                                        </div>
                                        <div class="col-lg-5">
                                            <input name="value" type="text" value="{{ item[1] }}" class="form-control" placeholder="值" autocomplete="off">
                                        </div>
                                        <div class="col-lg-2">
                                            {% if loop.index == 1 %}
                                                <span class="icon icon-plus"><i class="fa fa-plus" aria-hidden="true"></i></span>
                                            {% else %}
                                                <span class="icon icon-minus"><i class="fa fa-minus" aria-hidden="true"></i></span>
                                            {% endif %}
                                        </div>
                                    </div>
                                {% else %}
                                    <div class="col-lg-5">
                                            <input name="key" type="text" class="form-control" placeholder="键" autocomplete="off">
                                        </div>
                                        <div class="col-lg-5">
                                            <input name="value" type="text" class="form-control" placeholder="值" autocomplete="off">
                                        </div>
                                        <div class="col-lg-2">
                                            <span class="icon icon-plus"><i class="fa fa-plus" aria-hidden="true"></i></span>
                                        </div>
                                {% endfor %}
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label">组描述</label>
                            <div class="col-lg-8">
                                <textarea class="form-control" name="memo" rows="5" placeholder="请输入组变量">{{ memo }}</textarea>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>
        </div>

        <div class="panel-footer">
            <div class="row">
                <div class="col-sm-6 col-sm-offset-6">
                    <div class="col-sm-7 col-sm-offset-3">
                        <button class="btn btn-mint pull-right" type="submit">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock %}



{% block buttom_js %}
    {{ super() }}
    <!--bees-->
    <script src="{{ url_for('static', filename='js/bees.js') }}"></script>
    <!--Treeview-->
    <script src="{{ url_for('static', filename='plugins/bootstrap-treeview/js/bootstrap-treeview.min.js') }}"></script>

    <script type="text/javascript">
        $(function () {
            bees.initVariableParameterOperator();

            bees.initServerSideSelect2(
                $('select[name="asset_ids"]'),
                {url: '{{ url_for("assets.api-asset-list") }}', selected: '{{ hosts }}'},
                { multiple:true, placeholder: "请输入组主机" }
            );
        });

        $(function () {
            var $formEle = $('form[name="groupForm"]');
            bees.niceValidate($formEle);
            $formEle.on("valid.form", function () {
                setAjaxCSRFToken();
                var formData = bees.serializeToObject($formEle.serializeArray());
                delete formData.key;
                delete formData.value;

                var kwargs = {};
                $(".kwargs .item").each(function(index, row){
                        var k = $(row).find('input[name="key"]').val();
                        var v = $(row).find('input[name="value"]').val();
                        if (k != "" && v != ""){
                            kwargs[k] = v
                        }
                    }
                );
                formData['vars'] = JSON.stringify(kwargs);

                $.ajax({
                    type: 'post',
                    url: '{{ url_for("tasks.group-update", pk=default_pk) }}'.replace(bees.defaultPK, '{{ id }}'),
                    data : formData,
                    success: function (result) {
                        if (result.code != 200) {
                            $formEle.find('*[name='+ result.data.field +']').focus().addClass('has-error');
                            bees.tipError({
                                message: result.data.message
                            });
                        }else {
                            bees.tipInfo({
                                message: '修改成功'
                            });
                            window.location.href = '{{ url_for("tasks.group-list") }}'
                        }
                    }
                });
            })
        })

    </script>

{% endblock %}
